<script setup>
import { sxtSelinfo, sxtInsertinfo, sxtUpdateinfo, sxtDelinfo, sxtselti, sxtupdateti, setAppcxsq } from '../../api/home.js'
import { toast } from '~/composables/util.js'
import { reactive, ref } from 'vue'
const handleClick = (row) => {
  sxtDelinfo(row.id).then(res => {
    getData()
  })
}

const dialogFormVisible = ref(false)
const ti = ref(0)





const getData = () => {
  sxtSelinfo().then(res => {
    tableData.value = res.data.result
  })
  sxtselti().then(res => {
    console.log(res, 'res')
    ti.value = res.data.result[0].ti ?? 0
  })
}
getData()

const type = ref('')



const tableData = ref([])
const formLabelWidth = '140px'
const form = reactive({
  id: "",
  sxtid: '', // 摄像头id
  rtspaddress: '',
  httpaddress: '',
  jkwz: '', //监控位置
  qdxz: ''
})

const openDialog = (row) => {
  type.value = '编辑'
  form.sxtid = row.sxtid
  form.rtspaddress = row.rtspaddress
  form.httpaddress = row.httpaddress
  form.jkwz = row.jkwz
  form.id = row.id
  form.qdxz = row.qdxz


  dialogFormVisible.value = true
}

const closeFn = () => {
  form.sxtid = ''
  form.rtspaddress = ''
  form.httpaddress = ''
  form.jkwz = ''
  form.id = ''
  form.qdxz = ''

}



const submit = () => {
  let fn = type.value == '新增' ? sxtInsertinfo : sxtUpdateinfo
  fn(form).then((res) => {
    getData()
    dialogFormVisible.value = false
  })
}



const handleChange = (value) => {
  console.log(ti)
  sxtupdateti({ ti: ti.value })
}

const sqm = ref('')
const tapsqm = () => {
  let Q = {
    "kl": "ryl123456",
    "sqm": sqm.value
  }
  setAppcxsq(Q).then(res => {
    console.log(res)
    if (res.code == '0000') {
      toast(res.msg)
    }
  })
}

const inputOne = ref('')
const inputTwo = ref('')
const inputThree = ref('')
const inputFour = ref('')

const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')

const isVerify = ref(false)
const submitFn = () => {
  if (inputOne.value == 'r' && inputTwo.value == 'y' && inputThree.value == 'f' && inputFour.value == 'R' && input1.value == 'e' && input2.value == '@' && input3.value == 'z' && input4.value == '#') {
    isVerify.value = true
  } else {
    inputOne.value = ''
    inputTwo.value = ''
    inputThree.value = ''
    inputFour.value = ''
    input1.value = ''
    input2.value = ''
    input3.value = ''
    input4.value = ''
  }
  console.log(isVerify.value)
}
</script>

<template>
  <div class="w-screen h-screen flex justify-center items-center bg-dark-50" v-if="!isVerify">
    <form class="form">
      <div class="content">
        <p align="center">请先验证身份</p>
        <div class="inp">
          <input v-model="inputOne" placeholder="" type="text" class="input" maxlength="1">
          <input v-model="inputTwo" placeholder="" type="text" class="input" maxlength="1">
          <input v-model="inputThree" placeholder="" type="text" class="input" maxlength="1">
          <input v-model="inputFour" placeholder="" type="text" class="input" maxlength="1">

          <input v-model="input1" placeholder="" type="text" class="input" maxlength="1">
          <input v-model="input2" placeholder="" type="text" class="input" maxlength="1">
          <input v-model="input3" placeholder="" type="text" class="input" maxlength="1">
          <input v-model="input4" placeholder="" type="text" class="input" maxlength="1">


        </div>
        <button @click="submitFn">验证</button>
        <svg class="svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <path fill="#4073ff"
            d="M56.8,-23.9C61.7,-3.2,45.7,18.8,26.5,31.7C7.2,44.6,-15.2,48.2,-35.5,36.5C-55.8,24.7,-73.9,-2.6,-67.6,-25.2C-61.3,-47.7,-30.6,-65.6,-2.4,-64.8C25.9,-64.1,51.8,-44.7,56.8,-23.9Z"
            transform="translate(100 60)" class="path"></path>
        </svg>
      </div>

    </form>
  </div>
  <div v-else class="justify-center w-screen">
    <div class="w-[40%] mx-auto mt-[200px]">

      <div class="mb-[20px]">
        <el-input-number v-model="ti" :min="0" :max="10000000" @change="handleChange" />
      </div>

      <div class="mb-[20px] flex">
        <el-input placeholder="请填写授权码" class="w-[200px] mr-[20px]" v-model="sqm" />
        <el-button @click="tapsqm" type="success">覆盖</el-button>
      </div>

      <el-button type="success" class="mb-[20px]" @click="dialogFormVisible = true, type = '新增'">新增</el-button>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="sxtid" label="摄像头id" />
        <el-table-column prop="rtspaddress" label="rtsp地址" />
        <el-table-column prop="httpaddress" label="http地址" />
        <el-table-column prop="jkwz" label="监控位置" />
        <el-table-column prop="qdxz" label="监控房间号" />



        <el-table-column fixed="right" label="Operations" width="120">
          <template #default="{ row }">
            <el-popconfirm title="Are you sure to delete this?" @confirm="handleClick(row)">
              <template #reference>
                <el-button link type="primary" size="small">Detail</el-button>
              </template>
            </el-popconfirm>
            <el-button link type="primary" size="small" @click="openDialog(row)">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>





    <el-dialog v-model="dialogFormVisible" title="" @close="closeFn" width="50%">
      <el-form :model="form">
        <el-form-item label="摄像头ID" :label-width="formLabelWidth">
          <el-input v-model="form.sxtid" autocomplete="off" />
        </el-form-item>
        <el-form-item label="rtsp地址" :label-width="formLabelWidth">
          <el-input v-model="form.rtspaddress" autocomplete="off" />
        </el-form-item>
        <el-form-item label="http地址" :label-width="formLabelWidth">
          <el-input v-model="form.httpaddress" autocomplete="off" />
        </el-form-item>
        <el-form-item label="监控位置" :label-width="formLabelWidth">
          <el-input v-model="form.jkwz" autocomplete="off" />
        </el-form-item>
        <el-form-item label="监控房间号" :label-width="formLabelWidth">
          <el-input v-model="form.qdxz" placeholder="发电机房房间号为7,往后依次递增" autocomplete="off" />
        </el-form-item>
      </el-form>


      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="submit">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>




  </div>
</template>

<style scoped>
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #00000000;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8.2px);
  -webkit-backdrop-filter: blur(8.2px);
  border: 1px solid #369eff66;
  width: 28em;
  height: 14em;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  margin-bottom: auto;
}

.form p {
  color: #fff;
  font-weight: bolder;
}

.path {
  fill: #369eff
}

.svg {
  filter: blur(20px);
  z-index: -1;
  position: absolute;
  opacity: 50%;
  animation: anim 3s infinite;
}

.inp {
  margin-left: auto;
  margin-right: auto;
  white-space: 4px;
}

.input+.input {
  margin-left: 0.8em
}

.input {
  color: #fff;
  height: 2em;
  width: 2em;
  float: left;
  text-align: center;
  background: #00000000;
  outline: none;
  border: 1px #369eff solid;
  border-radius: 10px;
  transition: all 0.6s ease;
}

.input:focus {
  outline: none;
  border: 1px #fff solid;
}

.input:not(:placeholder-shown) {
  opacity: 40%
}

.form button {
  margin-left: auto;
  margin-right: auto;
  background-color: #00000000;
  color: #fff;
  width: 8.5em;
  height: 2.3em;
  border: #369eff 0.2em solid;
  border-radius: 11px;
  transition: all 0.5s ease;
}

.form button:hover {
  background-color: #369eff;
}

@keyframes anim {
  0% {
    transform: translateY(-70px);
  }

  50% {
    transform: translateY(-19px);
  }

  100% {
    transform: translateY(-70px);
  }
}
</style>
